<template>
  <div class="widgets" v-html="val.value" :contenteditable="!!val.isEdit" @blur="(e) => updateText(e, val.uuid)" :style="{
    position: 'absolute',
    left: val.left + 'px',
    top: val.top + 'px',
    width: val.width + 'px',
    minHeight: val.height + 'px',
    height: val.height + 'px',
    zIndex: val.style.zIndex,
    fontSize: val.style.FontSize + 'pt',
    color: val.style.FontColor,
    border: val.style.border ? '1px solid #000000' : '',
    textAlign: val.style.Alignment,
    fontWeight: val.style.Bold ? '900' : 'normal',
    display: 'flex',
    alignItems: 'center',
    justifyContent: `${val.style.Alignment == 'left' ? 'flex-start' : val.style.Alignment == 'right' ? 'flex-end' : 'center'}`,

  }"></div>
</template>

<script>
const WIDGET_NAME = 'braid-html'

export default {
  name: WIDGET_NAME,
  setting: {
    type: WIDGET_NAME,
    isEdit: false,
    dragable: true, // 是否可拖拽
    resizable: true, // 尺寸是否可变
    width: 220,
    height: 40,
    left: 50,
    top: 0,
    title: 'html',
    value: '<div>html<div>',
    defaultValue: '<div>html<div>',
    name: '',
    style: {
      zIndex: 0,
      Alignment: "left", // 对齐方式 1--左靠齐 2--居中 3--右靠齐
      ItemType: 0, // 打印类型 0--普通项 1--页眉页脚 2--页号项 3--页数项 4--多页项
      AutoHeight: false, // 高度自动（模板在该元素位置以下的元素都关联打印）
      BottomMargin: 0, // 距离下边距
      border: false,
      FontSize: 12,
      Bold: false, // 1代表粗体，0代表非粗体
    },
  },
  props: [
    'val', // 文本对象
  ],
  methods: {
    updateText(e, uuid) {
      let text = e.target.innerHTML
      this.$vptd.commit('updateData', {
        uuid: uuid,
        key: 'value',
        value: text,
      })
    },
  },
}
</script>

